import React from 'react';
import { Empty, Timeline } from 'antd';
import MyIcon from '@/components/MyIcon';
import { ClockCircleOutlined } from '@ant-design/icons';
// import { renderTempSignDom } from '../mconfig';

export const DetailDrawerCheckListView: React.FC<TempContractManageAPI.IDetailDrawerCheckListView> = ({ checkInfoList }) => {
  /** 样式根节点 */
  const prefixCls = 'tempcontract-detail-';

  return (
    <>
      {checkInfoList?.length > 0 ? (
        <Timeline className={'tempcontract-detail'}>
          {checkInfoList?.map((item: Record<string, any>, index: number) => {
            return (
              <div key={index} className={`${prefixCls}TimelineStyleItem`}>
                {item?.checkTime && (
                  <Timeline.Item dot={<ClockCircleOutlined />} color={'red'}>
                    <dl className={`${prefixCls}TimelineStyleItem-checkStateTitle`}>
                      {item?.checkTime || '--'} &nbsp;&nbsp;
                      {/* <span>{renderTempSignDom(item?.checkState)}</span> */}
                    </dl>
                    <dl>
                      <dt>
                        <MyIcon type="icon-user" />
                        审核人：
                      </dt>
                      <dd>{item?.checkerName || '--'}</dd>
                    </dl>
                    <dl>
                      <dt>
                        <MyIcon type="icon-bumen" />
                        审核部门：
                      </dt>
                      <dd>{item?.checkDepartmentName || '--'}</dd>
                    </dl>
                    <dl>
                      <dt>
                        <MyIcon type="icon-pandian1" />
                        审核意见：
                      </dt>
                      <dd>{item?.checkResult || '--'}</dd>
                    </dl>
                  </Timeline.Item>
                )}
                <Timeline.Item dot={<ClockCircleOutlined />}>
                  <dl className={`${prefixCls}TimelineStyleItem-checkStateTitle`}>
                    {item?.applyTime || '--'} &nbsp;&nbsp;
                    <span style={{ color: '#1677ff' }}>{index == checkInfoList?.length - 1 ? '提交申请' : '重新提交申请'}</span>
                  </dl>
                  <dl>
                    <dt>
                      <MyIcon type="icon-user" />
                      提交人：
                    </dt>
                    <dd>{item?.applyerName || '--'}</dd>
                  </dl>
                  <dl>
                    <dt>
                      <MyIcon type="icon-bumen" />
                      提交部门：
                    </dt>
                    <dd>{item?.applyDepartmentName || '--'}</dd>
                  </dl>
                </Timeline.Item>
              </div>
            );
          })}
        </Timeline>
      ) : (
        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无审核信息" />
      )}
    </>
  );
};
